/*
 * @Description:
 * @Author: LCL
 * @Date: 2021-11-16
 * @LastEditors: LCL
 * @LastEditTime: 2021-11-30
 * @FilePath: /beff/src/components/ComponentConfig/Upload.tsx
 */
import { Form, Input, InputNumber, Radio, Switch } from 'antd';
// import { useModel } from 'umi';
import { useEffect } from 'react';
import {
  titleRender,
  isInline,
  fieldRender,
  checkRender,
  descRender,
  tipRender,
  fieldPermissionsRender,
  spanWidthRender,
} from '@/components/ComponentConfig/commonItem';

type PropsType = {
  config: any;
  onChangeCallback: Function;
};

const Upload = (props: PropsType) => {
  // const { componentsConfig, setComponentsConfig } = useModel('components', (model) => ({
  //   componentsConfig: model.componentsConfig,
  //   setComponentsConfig: model.setComponentsConfig,
  // }));
  const { config } = props;
  const [form] = Form.useForm();
  // const initialValues = { ...componentsConfig.commonForm, ...componentsConfig.upload };

  useEffect(() => {
    form.setFieldsValue({ ...config });
  }, [config]);

  const onValuesChange = (changeValue: any, allValue: any) => {
    // console.log(allValue);

    for (let k in changeValue) {
      config.props[k] = allValue[k];
    }
    props.onChangeCallback(config);

    // const { required, label, name, layout, ...upload } = allValue;
    // const commonForm = { required, label, name, layout };
    // const upload = {};
    // const obj = JSON.parse(JSON.stringify(componentsConfig));
    // obj.commonForm = commonForm;
    // obj.upload = { ...upload, name };
    // setComponentsConfig(obj);
  };
  return (
    <div>
      {titleRender(config, props, 'title')}
      {fieldRender(config, props, 'field')}
      {descRender(config, props, 'describe')}

      <Form layout="vertical" form={form} onValuesChange={onValuesChange} initialValues={config.props}>
        <Form.Item label="上传地址" name="action" rules={[{ type: 'url' }]}>
          <Input />
        </Form.Item>
        <Form.Item label="查询地址" name="search" rules={[{ type: 'url' }]}>
          <Input />
        </Form.Item>
        <Form.Item label="删除地址" name="delete" rules={[{ type: 'url' }]}>
          <Input />
        </Form.Item>
        <Form.Item label="上传数量" name="maxCount">
          <InputNumber min={1} precision={0} />
        </Form.Item>
        {/* <Form.Item label="是否支持拖拽上传" name="drag" valuePropName="checked">
        <Switch />
      </Form.Item> */}
        <Form.Item label="是否支持多选" name="multiple" valuePropName="checked">
          <Switch />
        </Form.Item>
        <Form.Item label="上传列表的内建样式" name="listType">
          <Radio.Group>
            <Radio.Button value="text">文本</Radio.Button>
            <Radio.Button value="picture">图片</Radio.Button>
            <Radio.Button value="picture-card">照片墙</Radio.Button>
          </Radio.Group>
        </Form.Item>
      </Form>

      {fieldPermissionsRender(config, props, 'fieldPermissions')}
      {checkRender(config, props, 'check')}
      {isInline(config, props, 'inline')}
      {spanWidthRender(config, props, 'span')}
    </div>
  );
};

export default Upload;
